<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="20" class="mt10">
                <Col class="mb10" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in imageUrlList">
                    <div style="text-align: center">
                        <Card>
                            <img :src="item.photoUrl" alt="" style="width:100%;border-radius: 5px;">
                            <div style="text-align: right">
                                <p><span class="type-status-time">上传时间：</span>{{dateFilter(item.createTime)}}</p>
                            </div>
                        </Card>
                    </div>
                </Col>

            </Row>
            <!--                        分页导航栏-->
            <div style="text-align: center;margin-top: 10px;">

                <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                      @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
            </div>
        </div>
        <template>
            <BackTop :height="100" :bottom="100">
                <div style="background-color:#76A09D;border-radius: 50%">
                    <Icon type="md-arrow-round-up"/>
                </div>
            </BackTop>
        </template>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                //分页
                totals: 0,
                imageUrlList: [],
            }
        },
        created(){
          this.getImagePubList();
        },
        methods: {
            //获取图片列表
            async getImagePubList() {
                const {data: result} = await this.$http.get("getImagePubList/0/8")
                if (result.code === 200) {
                    this.imageUrlList = result.data.content
                    this.totals = result.data.totalElements;
                } else {
                    this.$Message.error(result.message)
                }
            },
            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.get("getImagePubList/" + (currentPage - 1) + "/8");
                if (result.code === 200) {
                    this.imageUrlList = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.get("getImagePubList/0/" + pageSize);
                if (result.code === 200) {
                    this.imageUrlList = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },
        }


    }
</script>
<style scoped lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }
    }

</style>

